import DashboardLayout from '@/components/layout/DashboardLayout'
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Copy, Users } from "lucide-react"

export default function Invites() {
  const inviteLink = "https://yunmao.com/register?code=ABC123"
  const stats = [
    {
      title: "已邀请用户",
      value: "12",
      icon: <Users className="h-4 w-4 text-muted-foreground" />
    },
    {
      title: "累计返利",
      value: "￥240.50",
      icon: <Users className="h-4 w-4 text-muted-foreground" />
    }
  ]

  const inviteRecords = [
    {
      email: "user1@example.com",
      date: "2024-01-15",
      commission: "￥20.00"
    },
    {
      email: "user2@example.com",
      date: "2024-01-16",
      commission: "￥20.50"
    },
    // 更多记录...
  ]

  const handleCopy = () => {
    navigator.clipboard.writeText(inviteLink)
    // 可以添加一个提示复制成功的消息
  }

  return (
    <DashboardLayout>
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <h2 className="text-2xl font-bold tracking-tight">我的邀请</h2>
        </div>

        <div className="grid gap-4 md:grid-cols-2">
          {stats.map((stat, index) => (
            <Card key={index}>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">
                  {stat.title}
                </CardTitle>
                {stat.icon}
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{stat.value}</div>
              </CardContent>
            </Card>
          ))}
        </div>

        <Card>
          <CardHeader>
            <CardTitle>邀请链接</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex gap-2">
              <Input value={inviteLink} readOnly />
              <Button variant="outline" size="icon" onClick={handleCopy}>
                <Copy className="h-4 w-4" />
              </Button>
            </div>
            <p className="text-sm text-muted-foreground">
              邀请新用户注册即可获得20%的返利奖励，终身有效
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>邀请记录</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="relative overflow-x-auto">
              <table className="w-full text-sm text-left">
                <thead className="text-xs text-gray-700 uppercase bg-gray-50">
                  <tr>
                    <th className="px-6 py-3">用户邮箱</th>
                    <th className="px-6 py-3">注册时间</th>
                    <th className="px-6 py-3">返利金额</th>
                  </tr>
                </thead>
                <tbody>
                  {inviteRecords.map((record, index) => (
                    <tr key={index} className="bg-white border-b">
                      <td className="px-6 py-4">{record.email}</td>
                      <td className="px-6 py-4">{record.date}</td>
                      <td className="px-6 py-4">{record.commission}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </CardContent>
        </Card>
      </div>
    </DashboardLayout>
  )
}
